<template>
<div>
<!--<audio src='../../assets/img/404adfac-f449-4476-a9fd-42e663068e59.mp3' controls='controls'></audio>-->

<el-upload
    class="upload-demo"
    action="http://localhost:8090/emp/empAuth"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="success"
    :on-error="error"
    :headers='myHeaders'
    :data='data'
    list-type="picture-card"
    multiple
    :limit="3"
    :file-list="fileList"
    :on-exceed="handleExceed">
<el-button size="small" type="primary">身份证正面</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
    <el-upload
        class="upload-demo"
        action="http://localhost:8090/emp/empAuth"
        :on-preview="handlePreview1"
        :on-remove="handleRemove1"
        :before-remove="beforeRemove1"
        :on-success="success1"
        :on-error="error1"
        :data='data1'
        list-type="picture-card"
        :headers='myHeaders'
        :before-upload='infoFaceCard'
        multiple
        :limit="3"
        :file-list="fileList1"
        :on-exceed="handleExceed1"
    >
        <el-button size="small" type="primary" >身份证反面</el-button>

        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-button @click='infoFaceCard'>test</el-button>
</div>
</template>
<script>
export default {
    data() {
        return {
            fileList: [],
            fileList1: [],
            //从路由中获取参数
            data:{eusername:this.$route.query.eusername,zfm:'face'},
            data1:{eusername:this.$route.query.eusername,zfm:'back'},
            myHeaders: {token: sessionStorage.getItem('token')},
            name:undefined
        };
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },success(res,file,fileList){
            if(res.name!=undefined){
                this.$message.success('识别成功')
                this.name=res.name;
                this.$message.success("识别人"+res.name+"身份证号"+res.num)
            }else {
                this.$message.success('识别失败')
            }

        },error(res,file,fileList){
            this.$message.success('上传失败')
        }
        ,handleRemove1(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview1(file) {
            console.log(file);
        },
        handleExceed1(files, fileList1) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove1(file, fileList1) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },infoFaceCard(){
            console.log(this.fileList.name)
            if(this.name===undefined){
                this.$message.error('请先上传正面')
                return  false;
            }else {
                return true;
            }
        }
        ,success1(res,file,fileList1){
            if(res.issue!=undefined){
                this.$message.success("识别成功识别信息"+res.issue)
                this.$router.push('/emp')
            }else {
                this.$message.success('识别失败')
            }

        },error1(res,file,fileList1){
            this.$message.success('上传失败')
        }
    }
}
</script>